<template>
  <div class="share">      
      <div class="tips">
        <span class="airticle" :class="{active:show == 1}" @click="aricle">文章</span>
        <span class="picture" :class="{active:show == 2}" @click="picture">摄影</span>
        <span class="notes" :class="{active:show == 3}" @click="note">随记</span>
      </div>
      <div class="container">
        <div class="wenzhan" :class="show == 1 ? 'main' : show == 2 ? 'rightbottom' : 'righttop'" v-if="airticle.length != 0">
          <h1 v-if="show != 1" style="font-size:3.5rem;margin-bottom:1rem">文章</h1>
          <transition-group>
            <div class="item" v-for="(item) in airticle" :key="item._id" @click.stop="showdetail(item)">
              <div class="left" v-lazy:background-image="item.imgurl">
                
              </div>
              <div class="right">
                <div class="head">
                  <h3>
                    {{item.title}}
                  </h3>
                  <div class="rightbox">
                    <el-button type="text" class="closewenzhan" @click.stop="deleteopen(1,item)"  v-if="item.userid == userinfo._id"> +</el-button>
                    <!-- <div class="closewenzhan" v-if="item.userid == userinfo._id" @click="deleteitem(item)">
                      +
                    </div> -->
                    <el-tooltip :content="item.hide == 0 ? '隐藏' : '展示'">
                      <el-switch
                        v-model="item.hide"
                        active-color="#13ce66"
                        inactive-color="#ff4949"
                        @change="myswitch(item._id,item.hide)"
                        :active-value="1"
                        :inactive-value="0"
                        :disabled="item.userid != userinfo._id"
                        @click.stop.native>
                      </el-switch>
                    </el-tooltip>
                  </div>
                </div>
                
                <div class="mid">
                  {{item.container}}
                </div>
                <div class="foot">
                  <div>
                    <span>{{(item.type == "1" ? '文章' : '' )+'/'+item.include}}</span>
                    <span>{{gettime(item.time)}}</span>
                  </div>
                  <div>
                    <i class="icon-dianzan" @click.stop="airticlegood(item)" :class="{active:item.mygood}"></i>
                    <span style="margin-right:1rem">{{item.goods}}</span>
                    <i class="icon-yanjing"></i>
                    <span>{{item.watches}}</span>
                  </div>
                </div>

              </div>
            </div>
          </transition-group>
        </div>
        <div class="pic" :class="show == 2 ? 'main' : show == 1 ? 'righttop' : 'rightbottom'" v-if="pictures.length != 0"> 
          <h1 v-if="show != 2" style="font-size:3.5rem;margin-bottom:1rem">摄影</h1>
          <div class="picbox">
            <transition-group>
              <div class="item" v-for="(item) in pictures" :key="item._id" @click="handleOpen(item)">
                <el-button type="text" class="closepic" @click.stop="deleteopen(2,item)"  v-if="item.userid == userinfo._id"> +</el-button>
                <!-- <div class="closepic" v-if="item.userid == userinfo._id" @click="deleteitem(item)">
                  +
                </div> -->
                <img v-lazy="item.imgurl" alt="" srcset="">
                <div class="cover">
                  <div class="desc">
                    {{item.title}}
                  </div>
                </div>   
              </div>
            </transition-group>
          </div>    
        </div>
        <div class="note" :class="show == 3 ? 'main' : show == 1 ? 'rightbottom' : 'righttop'" v-if="notes.length != 0">
          <h1 v-if="show != 3" style="font-size:3.5rem;margin-bottom:1rem">随记</h1>
          <div class="noteside" v-if="show != 3">
            <p class="time">{{gettime(notes[0].time)}}</p>
            <h2>
              {{notes[0].title}}
            </h2>
            <div class="info">
              {{notes[0].container}}
            </div>
            <div class="noteimg">
              <div class="firstimg"  v-lazy:background-image="notes[0].imglist[0]" >
                <div class="eachside" >
                  <div class="item" v-for="(img,imgindex) in notes[0].imglist" :key="imgindex" >

                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="notemain" v-if="show == 3">
            <transition-group>
              <div class="item" v-for="(item) in notes" :key="item._id" >
                <el-button type="text" class="closenote" @click.stop="deleteopen(3,item)"  v-if="item.userid == userinfo._id"> +</el-button>
                <!-- <div class="closenote" v-if="item.userid == userinfo._id" @click="deleteitem(item)">
                  +
                </div> -->
                <div class="left">
                  <h3>{{getmonth(item.time)[1]}}月</h3>
                  <h1>{{getmonth(item.time)[0]}}</h1>
                </div>
                <div class="right">
                  <div class="title">
                    {{item.title}}
                  </div>
                  <div class="info">
                    {{item.container}}
                  </div>
                  <div class="notimgs" v-if="item.imglist.length">
                    <div class="imgsleft">
                      <img v-lazy="item.imglist[0]" alt="" srcset="" @click="handleOpennote(item.imglist[0],item.imglist)">
                    </div>
                    <div class="imgsright">
                      <div class="eachimg" v-for="(img,imgindex) in item.imglist" :key="imgindex" @click="handleOpennote(img,item.imglist)">
                        <img v-lazy="img" alt="" srcset="">
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </transition-group>
          </div>
        </div>
      </div>
      <showairticle ref="showwenzhang" :eachairticle="eachairticle" :airticle = "airticle"></showairticle>
      <duo-image-viewer 
      :src="src" 
      :srcList="srcList" 
      @close="handleClose" 
      :showViewer="showViewer"
      />
      <div class="addbtn" @click="openadditems">+</div>
      <additems ref="additems" :show = "show" 
      @showairticlelist = "showairticlelist"
      @shownotelist = "shownotelist"
      @showpicturelist = "showpicturelist"
      ></additems>
  </div>
</template>
<script>
import * as myfunc from "../commom/js/myfunc"
import showairticle from "./show/showariticle.vue"
import additems from "./additems/additems.vue"
export default {
  data(){
    return{
      show:1,
      airticle:[
        // {
        //   // title:'文章名称',
        //   // picture:"lizi.jpg",
        //   // container:'文章的这边就是给不愿意点击的人看的，无所谓啦，红双喜一包12快确实有点影响现实生活了文章的这边就是给不愿意点击的人看的，无所谓啦，红双喜一包12快确实有点影响现实生活了文章的这边就是给不愿意点击的人看的，无所谓啦，红双喜一包12快确实有点影响现实生活了文章的这边就是给不愿意点击的人看的，无所谓啦，红双喜一包12快确实有点影响现实生活了文章的这边就是给不愿意点击的人看的，无所谓啦，红双喜一包12快确实有点影响现实生活了文章的这边就是给不愿意点击的人看的，无所谓啦，红双喜一包12快确实有点影响现实生活了',
        //   // totalinfo:'我这里写的是文章确实表达的内容，以及这篇文章确实的内容，你知道吗，哦哈哈哈，没有什么意义对于上面的话，但是我也想表达我的感觉，橘子真的不错吃哦,你知道吗，哦哈哈哈，没有什么意义对于上面的话，但是我也想表达我的感觉，橘子真的不错吃哦我这里写的是文章确实表达的内容，以及这篇文章确实的内容，你知道吗，哦哈哈哈，没有什么意义对于上面的话，但是我也想表达我的感觉，橘子真的不错吃哦,你知道吗，哦哈哈哈，没有什么意义对于上面的话，但是我也想表达我的感觉，橘子真的不错吃哦我这里写的是文章确实表达的内容，以及这篇文章确实的内容，你知道吗，哦哈哈哈，没有什么意义对于上面的话，但是我也想表达我的感觉，橘子真的不错吃哦,你知道吗，哦哈哈哈，没有什么意义对于上面的话，但是我也想表达我的感觉，橘子真的不错吃哦我这里写的是文章确实表达的内容，以及这篇文章确实的内容，你知道吗，哦哈哈哈，没有什么意义对于上面的话，但是我也想表达我的感觉，橘子真的不错吃哦,你知道吗，哦哈哈哈，没有什么意义对于上面的话，但是我也想表达我的感觉，橘子真的不错吃哦我这里写的是文章确实表达的内容，以及这篇文章确实的内容，你知道吗，哦哈哈哈，没有什么意义对于上面的话，但是我也想表达我的感觉，橘子真的不错吃哦,你知道吗，哦哈哈哈，没有什么意义对于上面的话，但是我也想表达我的感觉，橘子真的不错吃哦',
        //   // type:'文章/旅游',
        //   // time:"20210-09-03",
        //   // watches:200,
        //   // good:78,
        // }
      ],
      pictures:[
        // {
        // img:'a.png',
        // title:'照片的描述'
        // }
      ],
      notes:[
        // {
        //   title:'阳光灿烂的日子',
        //   info:'文章的内容文章的内容文章的内容文的内容文章的内容文章的内文章的内容文章的内章的内容文章的内容文的内容文章的内容文章的内文章的内容文章的内章的内容文章的内容文的内容文章的内容文章的内文章的内容文章的内章的内容文章的内容文的内容文章的内容文章的内文章的内容文章的内章的内容文章的内容文的内容文章的内容文章的内文章的内容文章的内章的内容文章的内容文的内容文章的内容文章的内文章的内容文章的内章的内容文章的内容文的内容文章的内容文章的内文章的内容文章的内章的内容文章的内容文的内容文章的内容文章的内文章的内容文章的内章的内容文章的内容文的内容文章的内容文章的内文章的内容文章的内章的内容文章的内容文的内容文章的内容文章的内文章的内容文章的内章的内容文章的内容文的内容文章的内容文章的内文章的内容文章的内章的内容文章的内容文的内容文章的内容文章的内文章的内容文章的内章的内容文章的内容文的内容文章的内容文章的内文章的内容文章的内章的内容文章的内容文的内容文章的内容文章的内文章的内容文章的内章的内容文章的内容文的内容文章的内容文章的内文章的内容文章的内容文的内容文章的内容文章的内容文章的内容文的内容文章的内容文章的内容文章的内容文的内容文章的内容文章的内容文章的内容文的内容文章的内容文章的内容文章的内容文的内容文章的内容文章的内容文章的内容文的内容文章的内容容文章的内容文章的内容文章的内容文章的内容',
        //   month:"9月",
        //   day:'09',
        //   time:'2021-09-19',
        //   imglist:['a.png','b.png','c.png','d.png','c.png','d.png']
        // }
      ],
      eachairticle:{},
      src: "",
      srcList: [],
      showViewer: false,
      userinfo:{}
    }
  },
  created(){
    this.showairticlelist();
    this.shownotelist()
    this.showpicturelist()
    this.showuserinfo();
    
  },
  methods:{
     deleteopen(show,item) {
      this.$confirm('删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
          let value = myfunc.getlocalstorage();
          let options = {
            uid:value._id,
            _id:item._id
          }
          this.$http.post(this.serverurl+'airticcle/remove',options).then((result)=>{
          let info = result.body;
          if(info.status == 200){
             this.$message({
              type: 'success',
              message: '删除成功!'
            });
          }
          if(show == 1){
            this.showairticlelist();
          }else if(show == 2){
            this.showpicturelist()
          }else{
            this.shownotelist()
          }         
        },(err)=>{
            this.$message({
              type: 'error',
              message: '删除失败!'
            });
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });          
      });
    },



    airticlegood(item){//给文章点赞    
      let value = myfunc.getlocalstorage();
      let options = {
        aid:item._id,
        uid:value._id,
        good:!item.mygood
      };
      item.mygood = !item.mygood
      if(item.mygood){
        item.goods = item.goods + 1;
      }else{
        item.goods = item.goods - 1;
      }
       this.$http.post(this.serverurl+'goods/airticle',options).then((result)=>{
        let info = result.body;
        if(info.status == 200){
          let value = ""
           if(item.mygood){
              value = "点赞"
            }else{
              value = "取消点赞"
            }
          this.$notify({
            title: '成功',
            message: value,
            type: 'success'
          });
        }
      },(err)=>{
         this.$notify({
            title: '失败',
            message: '点赞',
            type: 'error'
          });
      })
    },
    showairticlelist(){//后台获取文章列表
      let value = myfunc.getlocalstorage();
      let options = {
        uid:value._id,
        hide:1,
        type:"1"
      };
      this.$http.post(this.serverurl+'airticcle/show',options).then((result)=>{
        let info = result.body;
        if(info.status == 200){
          this.airticle = info.data;
          this.airticle.sort((a,b)=>{
            let t1 = new Date(a.time);
            let t2 = new Date(b.time);
            return t2-t1
          })
        }
      },(err)=>{
        console.log(err)
      })
    },
    showpicturelist(){//后台获取照片列表
      let value = myfunc.getlocalstorage();
      let options = {
        uid:value._id,
        hide:0,
        type:"2"
      };
      this.$http.post(this.serverurl+'airticcle/show',options).then((result)=>{
        let info = result.body;
        if(info.status == 200){
          this.pictures = info.data
        }
      },(err)=>{
        console.log(err)
      })
    },
    shownotelist(){//后台获取随记列表
      let value = myfunc.getlocalstorage();
      let options = {
        uid:value._id,
        hide:0,
        type:"3"
      };
      this.$http.post(this.serverurl+'airticcle/show',options).then((result)=>{
        let info = result.body;
        if(info.status == 200){
          this.notes = info.data
           this.notes.sort((a,b)=>{
            let t1 = new Date(a.time);
            let t2 = new Date(b.time);
            return t2-t1
          })
        }
      },(err)=>{
        console.log(err)
      })
    },
    myswitch(aid,value){//开关
     let options = {
        id:aid,
        type:'hide',
        data:value
      };
      console.log(options)
      this.$http.post(this.serverurl+'airticcle/changeinfo',options).then((result)=>{
        let info = result.body;
        if(info.status == 200){
          let state = value ? '设置隐藏' : '设置展示'
          this.$notify({
            title: '成功',
            message: state,
            type: 'success'
          });
        }
      },(err)=>{
        console.log(err)
      })
    },
    showuserinfo(){
      let value = myfunc.getlocalstorage();
      if(JSON.stringify(value) == "{}"){//本地缓存为空
        return
      }else{
         this.userinfo = value;
      }   
    },
    openadditems(){//添加文章摄影随记等等
      this.$refs.additems.open();
      if(this.show == 1){
        console.log('文章')
      }else if(this.show == 2){
        console.log('摄影')
      }else if(this.show == 3){
        console.log('随记')
      }
    },
    showdetail(item){
      this.$refs.showwenzhang.open()
      this.eachairticle = item;
    },
    aricle(){
      this.show = 1;
    },
    picture(){
      this.show = 2;
    },
    note(){
      this.show = 3
    },
    myrequire(icon){//处理显示路径
      const myurl = require(`../commom/images/pics/${icon}`)
      return `backgroundImage: url(${myurl})`      
    },
    handleClose() {
      this.showViewer = false
    },
    handleOpen(item) {
      this.srcList = [];
      this.showViewer = !this.showViewer
      this.src = item.imgurl;
      this.srcList = this.pictures.map((item)=>{
        return item.imgurl
      })
    },
    handleOpennote(item,list){
      this.srcList = [];
      this.showViewer = !this.showViewer
      this.src = item;
      this.srcList = list.map((item)=>{
        return item;
      })
    },
    getmonth(time){
      let d = new Date(time)
      let D = d.getDate();
      let M = d.getMonth() + 1;
      return [D,M]
    },
    gettime(time){
      let d = new Date(time)
      let D = d.getDate();
      let M = d.getMonth() + 1;
      let Y = d.getFullYear();
      let h = d.getHours();
      let m = d.getMinutes();
      
      let n = new Date()
      let nD = n.getDate();
      let nM = n.getMonth() + 1;
      let nY = n.getFullYear();
      let nh = n.getHours();
      let nm = n.getMinutes();
      if(h< 10){
        h = '0'+h
      }
      if(m<10){
        m = '0'+m
      }
      if(D == nD && M == nM && Y == nY){
        return `${h}:${m}`
      }else if( M == nM && Y == nY && nD-D ==1){
        return `昨天${h}:${m}`
      }else{
        return ` ${Y}/${M}/${D} ${h}:${m}`
      }
    }
  },
  components:{
    showairticle,
    additems
  }
}
</script>

<style lang="less" scoped>
.share{
  height: 100%;
  display: flex;
  flex-direction: column;
  .addbtn{
    cursor: pointer;
    z-index: 997;
    width: 5rem;
    height: 5rem;
    border-radius: 50%;
    line-height: 5rem;
    text-align: center;
    font-size: 5rem;
    overflow: hidden;
    color: #ffffff;
    background-color: rgba(0, 122, 255, 100);
    position: fixed;
    right: 5%;
    bottom: 5%;
  }
  .tips{
    margin-bottom: 1rem;
    span{
      padding-right:2rem;
      color: rgba(64, 64, 64, 100);
      font-size: 1.4rem;
      font-family: AlibabaPuHui-regular;
      font-weight: bold;
      cursor: pointer;
      color: #BDBDBD;
      &.active{
        font-size: 1.5rem;
        color: #404040;
      }
    }
  }
  .container{
    position: relative;
    height: 100%;
    >div{
      position: absolute;
      width: 40%;
      height:50%;
      transition: all 0.5s ease;
      left: 60%;
    }
    .wenzhan{
      padding: 1rem 2rem;
      overflow-y:scroll;
      scrollbar-width: none; /* firefox */
      -ms-overflow-style: none; /* IE 10+ */
      &::-webkit-scrollbar {
        width: 0 !important;
      }
      .item{
        padding: 1rem;
        background: #fff;
        border-radius: 1rem;
        display: flex;
        margin-bottom: 2rem;
        cursor: pointer;
        .left{
          min-width: 16rem;
          height: 15rem;
          // background-image: url("../commom/images/lizi.jpg");
          background-position: center center;
          background-repeat: no-repeat;
          background-size: cover;
          border-radius: 1rem;
        }
        .right{
          padding: 0 1.8rem;
          display: flex;
          flex-direction: column;
          flex: 1;
          .head{
            display: flex;
            justify-content: space-between;
            align-items: center;
            h3{
              font-size: 2rem;
              color: rgba(16, 16, 16, 100);
              font-weight: bold;
              line-height: 2rem;
            }
            .rightbox{
              display: flex;
              align-items: center;
              /deep/.closewenzhan{
                padding: 0;
                margin-right: 1.5rem;
                width: 2rem;
                font-weight: bold;
                height: 2rem;
                line-height: 1rem;
                font-size: 2rem;
                text-align: center;
                border-radius: 50%;
                color: #fff;
                background-color: rgb(248, 77, 77);
                transition: all 0.2s ease;
                transform:rotate(45deg) ;
                &:hover{
                  transform:rotate(225deg) ;
                }
              }
            }
          }
          
          .mid{
            width: 100%;
            flex: 1;
            color: rgba(158, 158, 158, 100);
            font-size: 1.4rem;
            text-align: left;
            font-family: SourceHanSansSC-regular;
            padding: 1rem 0;
            line-height: 2rem;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 3;
            overflow: hidden;
          }
          .foot{
            display: flex;
            justify-content: space-between;
            color: rgba(158, 158, 158, 100);
            font-size: 1.2rem;
            text-align: left;
            font-family: SourceHanSansSC-regular;
            .active{
              font-size: 1.8rem;
              color: #007aff;
            }
          }
        }
      }
    }
    .pic{
      display: flex;
      flex-direction: column;
      padding: 1rem 2rem;
      overflow-y:scroll;
      scrollbar-width: none; /* firefox */
      -ms-overflow-style: none; /* IE 10+ */
      &::-webkit-scrollbar {
        width: 0 !important;
      }
      .picbox{
        flex: 1;
        -moz-column-count:2;
        -moz-column-gap:1rem;
        -webkit-column-count:2;
        -webkit-column-gap:1rem;
        -o-column-count:2;
        -o-column-gap:1rem;
        .item{
          position: relative;
          width:100%; 
          min-height:100px;
          padding:2px 1px;
          display:inline-block;
          border-radius: 1.5rem;
          overflow: hidden;
          cursor: pointer;
          box-sizing: border-box;   
          .closepic{
            padding: 0;
            position: absolute;
            width: 2rem;
            font-weight: bold;
            height: 2rem;
            line-height: 1rem;
            font-size: 2rem;
            text-align: center;
            border-radius: 50%;
            color: #fff;
            background-color: rgb(248, 77, 77);
            transition: all 0.2s ease;
            transform:rotate(45deg) ;
            right: 1rem;
            top: 1rem;
            z-index: 150;
            &:hover{
              transform:rotate(225deg) ;
            }
          }
          .cover{
            display: none;
            position: absolute;
            width: 100%;
            top: 0;
            bottom: 0;
            background-color: rgba(14, 13, 13, 0.42);
            .desc{
              position: absolute;
              width: 100%;
              bottom: 0;
              word-break:break-all;
              background-color: rgba(19, 18, 18, 0.7);
              padding: 1rem 2rem;
              color: #ffffff;
            }
          }    
          img{
            width: 100%;
          }
          &:hover{
            .cover{
              display: block;
            }
          }
        }
      }
     
    }
    .note{
      padding: 1rem 2rem;
      display: flex;
      flex-direction: column;
      .noteside{
        display: flex;
        flex-direction: column;
        flex: 1;
        .time{
          color: rgba(189, 189, 189, 100);
          font-size: 1.2rem;
          text-align: left;
          margin-bottom: 1rem;
        }
        h2{
          color: rgba(16, 16, 16, 100);
          font-size: 16px;
          text-align: left;
          font-weight: bold;
          margin-bottom: 1rem;
        }
        .info{
          color: rgba(158, 158, 158, 100);
          height: 6rem;
          overflow: hidden;
          font-size: 1.4rem;
          line-height: 2rem;
          text-align: left;
          font-family: SourceHanSansSC-regular;
        }
        .noteimg{
          flex: 1;
          display: flex;
          flex-direction: column;
          padding: 1rem;
          .firstimg{
            flex: 1;
            background-position: center center;
            background-size: cover;
            background-repeat: no-repeat;
          }
        }
      }
      .notemain{
        .item{
          display: flex;
          margin-bottom: 3rem;
          padding: 1rem;
          cursor: pointer;
          position: relative;
          .closenote{
            padding: 0;
            position: absolute;
            font-weight: bold;
            width: 2rem;
            height: 2rem;
            line-height: 1rem;
            font-size: 2rem;
            text-align: center;
            border-radius: 50%;
            color: #fff;
            background-color: rgb(248, 77, 77);
            transition: all 0.2s ease;
            transform:rotate(45deg) ;
            right: 1rem;
            top: 1rem;
            z-index: 150;
            &:hover{
              transform:rotate(225deg) ;
            }
          }
          &:hover{
            background: #fff;
            border-radius: 1rem;
          }
          .left{
            text-align: right;
            color: #BDBDBD;
            width: 5rem;
            h3{
              font-size: 2rem;
            }
            h1{
              font-size: 3.6rem;
            }
          }
          .right{
            margin-left: 2rem;
            flex: 1;
            .title{
              font-size: 4rem;
              margin-bottom: 1rem;
            }
            .info{
              padding-right: 5rem;
              // width: 100%;
              min-width: 50rem;
              color: rgba(158, 158, 158, 100);
              font-size: 1.2rem;
              line-height: 2rem !important;
              text-align: left;
              font-family: SourceHanSansSC-regular;
              margin-bottom: 1.2rem;
            }
            .notimgs{
              width: 100%;
              box-sizing: border-box;
              padding-right: 10rem;
              display: flex;
              .imgsleft{
                cursor: pointer;
                width: 50%;
                height: 0;
                padding-bottom:50%;
                overflow: hidden;
                margin-right: 1rem;
                img{
                  width: 100%;
                }
              }
              .imgsright{
                flex: 1;
                .eachimg{
                  cursor: pointer;
                  float: left;
                  width: 25%;
                  height: 0;
                  padding-bottom:25%;
                  overflow: hidden;
                  margin-bottom: 1rem;
                  margin-right: 1rem;
                  img{
                    display: block;
                    width: 100%;
                  }
                }
              }
            }
          }
        }
      }
    }
    .main{
      width: 60%;
      height:100%;
      top: 0;
      left: 0%;
      .picbox{
        -moz-column-count:4;
        -moz-column-gap:1rem;
        -webkit-column-count:4;
        -webkit-column-gap:1rem;
        -o-column-count:4;
        -o-column-gap:1rem;
      }
      &.note{
        overflow-y:scroll;
        scrollbar-width: none; /* firefox */
        -ms-overflow-style: none; /* IE 10+ */
        &::-webkit-scrollbar {
          width: 0 !important;
        }
        .item{
          .right{
            .info{
              word-break:break-all;
              padding-right: 15rem;
            }
            .notimgs{
              padding-right: 20rem;
            }
          }
        }
      }
    }
    .righttop{
      background-color: #ffffff;
      border-radius: 1rem;
      top: 0;
    }
    .rightbottom{
      height: 48%;
      background-color: #ffffff;
      border-radius: 1rem;
      top: 52%;
    }
  }
}
.v-enter-active,.v-leave-active {
  transition: all 0.4s ease;
}
.v-enter, .v-leave-to
{
  transform: translateX(100%);
  opacity: 0;
}
</style>